<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { formItems } from './form-item'
import formBox from '@/components/queryTable/form/index.vue'
import tableBox from '@/components/queryTable/table/index.vue'
import { TableItem } from '@/api/common'
import router from '@/router/index'
import jsghclDialog from './dialogs/jsghcl-dialog.vue'
import thclDialog from './dialogs/thcl-dialog.vue'
import jjdDialog from './dialogs/jjd-dialog.vue'
import sdjsDialog from './dialogs/sdjs-dialog.vue'
import jzsmService from '@/api/jzsm'
import { JzsmListOutputDTO } from '@/api/jzsm-dto'
import xtpzService from '@/api/xtpz'
import { useMainStore } from '@/store/main'
const store = useMainStore()

const activeName = ref('jzsm')
const loading = ref(false)

const jsghclRef = ref<InstanceType<typeof jsghclDialog>>()
const thclRef = ref<InstanceType<typeof thclDialog>>()

const optionsObjs = ref<any>({
  cbbmbms: [],
})
// 更多条件查询
const formLabel = ref()
onMounted(async () => {
  loading.value = true
  formLabel.value = await formItems('jzsm')
  queryDlrsjqx()
  loading.value = false
  // 分页
  changePageNum(1)
})
// 主管或扫描人
const isManage = computed(() => store.userInfo.anqxList.includes('002002b001'))
// 获取权限配置
const queryDlrsjqx = () => {
  xtpzService.getDlrsjqx({}).then((res: any) => {
    optionsObjs.value.cbbmbms = (res.data.txbmList || []).map((el: any) => {
      return {
        dm: el.bmbm,
        mc: el.bmmc,
      }
    })
  })
}

// 查询条件
const form = ref({
  pageSize: 20,
  pageNum: 1,
  filter: {
    ajlbbm: '',
    ajmc: '',
    bmsah: '',
    cbbmbms: [],
    smztdm: '',
    sqjsrq: '',
    sqksrq: '',
    sqr: '',
    tysah: '',
  },
})

const total = ref<number>(0)
const page = computed(() => {
  return {
    pageNum: form.value.pageNum,
    pageSize: form.value.pageSize,
    total: total.value,
  }
})

const tableData = ref<TableItem>({
  data: [],
  titles: [
    {
      label: '案件名称',
      prop: 'ajmc',
      width: 200,
      custom: true,
      dqfs: 'left',
    },
    { label: '部门受案号', prop: 'bmsah', width: 300, dqfs: 'left' },
    { label: '统一受案号', prop: 'tysah', width: 180, dqfs: 'left' },
    { label: '案卷类别', prop: 'ajlx', width: 120, dqfs: 'left' },
    { label: '承办部门', prop: 'cbbmmc', width: 180, dqfs: 'left' },
    { label: '检察官', prop: 'cbjcg', width: 120, dqfs: 'left' },
    { label: '纸质页数', prop: 'smajsl', width: 120, dqfs: 'left' },
    { label: '照片数', prop: 'smzpsl', width: 120, dqfs: 'left' },
    { label: '业务部门送扫人', prop: 'ssrxm', width: 150, dqfs: 'left' },
    {
      label: '送扫日期',
      prop: 'ssrq',
      width: 130,
      dqfs: 'left',
    },
    { label: '档案部门接收人', prop: 'jsrxm', width: 150, dqfs: 'left' },
    { label: '接收日期', prop: 'jsrq', width: 130, dqfs: 'left' },
    { label: '档案部门扫描人', prop: 'smrxm', width: 150, dqfs: 'left' },
    { label: '扫描日期', prop: 'smjsrq', width: 130, dqfs: 'left' },
    { label: '档案部门归还人', prop: 'ghrxm', width: 150, dqfs: 'left' },
    { label: '归还日期', prop: 'ghrq', width: 130, dqfs: 'left' },
    { label: '业务部门签收人', prop: 'qsrxm', width: 150, dqfs: 'left' },
    {
      label: '签收日期',
      prop: 'qsrq',
      width: 130,
      dqfs: 'left',
    },
  ],
})

const getTableData = () => {
  const params = form.value
  loading.value = true
  jzsmService
    .queryJzsmList(params)
    .then((res) => {
      if (res) {
        tableData.value.data = res.data.list
        total.value = res.data.total
      }
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
    .finally(() => {
      loading.value = false
    })
}

/*
 * 分页
 */
const changePageNum = (val: number) => {
  form.value.pageNum = val
  getTableData()
}

/*
 * 分页
 */
const changePageSize = (val: number) => {
  form.value.pageNum = 1
  form.value.pageSize = val
  getTableData()
}

/**
 * 表格选择
 */
const multipleSelection = ref<JzsmListOutputDTO[]>([])
const selectionChange = (val: JzsmListOutputDTO[]) => {
  multipleSelection.value = val
}

/*
 * 点击案件名称进入归档
 */
const checkRow = (row: any) => {
  router.push({
    path: '/jzsmzl',
    query: {
      ...row,
      route: '/jzsm',
    },
  })
}

// 打开接收材料弹窗
const openJsclDialog = () => {
  jsghclRef.value?.openDialog('js', multipleSelection.value)
}

const openGhclDialog = () => {
  jsghclRef.value?.openDialog('gh', multipleSelection.value)
}

// 退回材料
const openThclDialog = (row?: JzsmListOutputDTO) => {
  thclRef.value?.openDialog(multipleSelection.value, row)
}

/*
 * 打开交接单弹框
 */
const jjdDialogRef = ref<InstanceType<typeof jjdDialog>>()
const openJjdDialog = (val?: JzsmListOutputDTO) => {
  if (val) {
    jjdDialogRef.value!.openDialog([val.jzsmjlbh])
  } else {
    const tempList = multipleSelection.value.map((el) => el.jzsmjlbh)
    jjdDialogRef.value!.openDialog(tempList)
  }
}

const sdjsDialogRef = ref<InstanceType<typeof sdjsDialog>>()
const openSdjsDialog = () => {
  sdjsDialogRef.value?.openDialog()
}
/*
 * 查询按钮
 */
const searchTable = (data: any) => {
  let newObj: any = {}
  for (const key in data) {
    if (key.endsWith('-rq')) {
      const kssj = key.replace('-rq', 'ksrq')
      const jssj = key.replace('-rq', 'jsrq')
      if (data[key]?.length) {
        newObj[kssj] = data[key][0]
        newObj[jssj] = data[key][1]
      } else {
        newObj[kssj] = ''
        newObj[jssj] = ''
      }
    }
    newObj[key] = data[key]
  }
  form.value.filter = newObj
  getTableData()
}

const tableBoxRef = ref<InstanceType<typeof tableBox>>()

const rowClick = (row: any) => {
  if (multipleSelection.value?.includes(row)) {
    tableBoxRef.value?.refTable.toggleRowSelection(row, false)
  } else {
    tableBoxRef.value?.refTable.toggleRowSelection(row, true)
  }
}
</script>
<template>
  <div class="container">
    <el-tabs type="card" v-model="activeName">
      <el-tab-pane label="集中扫描" name="jzsm" lazy>
        <div class="content-box">
          <!--表单-->
          <div class="form-box">
            <form-box
              ref="formBoxRef"
              :formLabel="formLabel"
              :formData="form.filter"
              :moreShow="false"
              :optionsObj="optionsObjs"
              @searchEvent="searchTable"
            />
          </div>
          <!--按钮组-->
          <div class="btn-box">
            <div class="table-title">
              <span>集中扫描</span>
            </div>
            <button v-if="isManage" class="btn_operation" @click="openJsclDialog">
              <div class="btn-jscl"></div>
              接收材料
            </button>
            <button
              v-if="isManage"
              class="btn_operation"
              :disabled="!multipleSelection.length"
              @click="openThclDialog()"
            >
              <div class="btn-back"></div>
              退回材料
            </button>
            <button v-if="isManage" class="btn_operation" @click="openGhclDialog">
              <div class="btn-ghcl"></div>
              归还材料
            </button>
            <button v-if="!isManage" class="btn_operation">
              <div class="btn-jscl"></div>
              扫码接收
            </button>
            <button v-if="!isManage" class="btn_operation" @click="openSdjsDialog">
              <div class="btn-jscl"></div>
              手动接收
            </button>
            <button
              class="btn_operation"
              :disabled="!multipleSelection.length"
              @click="openJjdDialog()"
            >
              <div class="btn-sbxz"></div>
              交接单
            </button>
            <!-- @click="changePageNum(1)" -->
            <button class="btn_operation" @click="getTableData">
              <div class="btn-refresh"></div>
              刷新
            </button>
          </div>
          <!--表格-->
          <div class="table-box">
            <table-box
              gnbm="jzsm"
              ref="tableBoxRef"
              :table-data="tableData"
              :selectShow="true"
              :getTableDataParam="page"
              :tableInfo="{ total: page.total }"
              @changeCurrent="changePageNum"
              @changeSize="changePageSize"
              @selectionChange="selectionChange"
              @checkRow="checkRow"
              @rowClick="rowClick"
            >
              <template #myAction>
                <el-table-column label="操作" width="100" fixed="right">
                  <template #default="scope">
                    <div
                      class="active-img"
                      title="纸质材料扫描交接单"
                      @click="openJjdDialog(scope.row)"
                    >
                      <img src="@/assets/images/tgspb.png" />
                    </div>
                    <div
                      v-if="scope.row.thyy"
                      class="active-img"
                      title="查看退回原因"
                      @click="openThclDialog(scope.row)"
                    >
                      <img src="@/assets/images/details.png" />
                    </div>
                  </template>
                </el-table-column>
              </template>
            </table-box>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- 接收归还实体材料 -->
    <jsghcl-dialog ref="jsghclRef" @refresh="getTableData"></jsghcl-dialog>
    <!-- 退回材料弹窗 -->
    <thcl-dialog ref="thclRef" @refresh="getTableData"></thcl-dialog>
    <!-- 交接单 -->
    <jjd-dialog ref="jjdDialogRef" />
    <sdjs-dialog ref="sdjsDialogRef" @refresh="getTableData" />
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  background: #fff;
  .content-box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .form-box {
    width: 100%;
  }
  .btn-box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 10px;
  }
  .table-box {
    flex: 1;
    flex-shrink: 0;
    overflow: hidden;
    > .container {
      display: flex;
      flex-direction: column;
    }
  }
  .active-img {
    cursor: pointer;
    float: left;
  }
  .active-img + .active-img {
    margin-left: 10px;
  }
}
</style>
